<template>

  <div class="carousel-container" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
 
    <!-- 主图片区域 -->
    <div class="carousel-main">
      <div class="image-container">
        <img 
          :src="currentSlide.imagePath" 
          :alt="currentSlide.caption"
          @click="navigateTo(currentSlide.go)"
          class="carousel-image"
        />
        <div class="image-overlay">
          <div class="category-tag">{{ currentSlide.categoryName }}</div>
        </div>
      </div>
      
      <!-- 标题导航区域 -->
      <div class="title-nav">
        <div 
          v-for="(slide, index) in carouselData" 
          :key="index"
          :class="['title-item', { active: currentIndex === index }]"
          @mouseenter="jumpToSlide(index)"
          @click="navigateTo(slide.go)"
        >
          {{ slide.caption }}
        </div>
      </div>
    </div>
    
    <!-- 指示器 -->
    <div class="indicators">
      <span 
        v-for="(slide, index) in carouselData" 
        :key="index"
        :class="['indicator', { active: currentIndex === index }]"
        @click="jumpToSlide(index)"
      ></span>
    </div>
    
    <!-- 左右箭头 -->
    <button class="nav-btn prev" @click="prevSlide">‹</button>
    <button class="nav-btn next" @click="nextSlide">›</button>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'CarouselComponent',
  setup() {
    // 分类导航数据
    const slides = ref([
      { categoryName: '热点' },
      { categoryName: '聚焦' },
      { categoryName: '天下' },
      { categoryName: '百态' },
      { categoryName: '军事' }
    ])
    
    // 轮播图数据
    const carouselData = ref([
      { categoryName: '热点', imagePath: 'images/1.jpg', caption: '航拍南京五一出城车辆："小铁盒"缓慢前行', go: '1.html' },
      { categoryName: '聚焦', imagePath: 'images/2.jpg', caption: '西湖断桥客流爆满 美女城管巡逻队帅气吸睛', go: '2.html' },
      { categoryName: '天下', imagePath: 'images/3.jpg', caption: '载45人客车爆燃 瞬间被烧成空架', go: '3.html' },
      { categoryName: '百态', imagePath: 'images/4.jpg', caption: '寒流袭英法 酿酒商点蜡烛为葡萄取暖', go: '4.html' },
      { categoryName: '军事', imagePath: 'images/5.jpg', caption: '即将首飞！中国AG600两栖飞机完成首次滑行', go: '5.html' }
    ])
    
    const currentIndex = ref(0)
    const currentSlide = ref(carouselData.value[0])
    const intervalId = ref(null)
    const isPaused = ref(false)
    
    // 自动轮播
    const startCarousel = () => {
      if (intervalId.value) return
      intervalId.value = setInterval(() => {
        if (!isPaused.value) {
          nextSlide()
        }
      }, 3000) // 3秒切换一次
    }
    
    // 停止轮播
    const stopCarousel = () => {
      if (intervalId.value) {
        clearInterval(intervalId.value)
        intervalId.value = null
      }
    }
    
    // 暂停轮播
    const pauseCarousel = () => {
      isPaused.value = true
    }
    
    // 恢复轮播
    const resumeCarousel = () => {
      isPaused.value = false
    }
    
    // 下一张
    const nextSlide = () => {
      currentIndex.value = (currentIndex.value + 1) % carouselData.value.length
      currentSlide.value = carouselData.value[currentIndex.value]
    }
    
    // 上一张
    const prevSlide = () => {
      currentIndex.value = currentIndex.value === 0 
        ? carouselData.value.length - 1 
        : currentIndex.value - 1
      currentSlide.value = carouselData.value[currentIndex.value]
    }
    
    // 跳转到指定幻灯片
    const jumpToSlide = (index) => {
      currentIndex.value = index
      currentSlide.value = carouselData.value[index]
    }
    
    // 导航到指定地址
    const navigateTo = (url) => {
      window.open(url, '_blank')
    }
    
    // 组件挂载时启动轮播
    onMounted(() => {
      startCarousel()
    })
    
    // 组件卸载时清理定时器
    onUnmounted(() => {
      stopCarousel()
    })
    
    return {
      slides,
      carouselData,
      currentIndex,
      currentSlide,
      pauseCarousel,
      resumeCarousel,
      nextSlide,
      prevSlide,
      jumpToSlide,
      navigateTo
    }
  }
}
</script>

<style scoped>
.carousel-container {
  position: relative;
  width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* 分类导航样式 */
.category-nav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
}

.category-item {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.category-item:hover {
  background: rgba(0, 0, 0, 0.9);
}

.category-item a {
  display: block;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.category-item a:hover {
  color: #ffd700;
}

.carousel-main {
  position: relative;
}

.image-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-image:hover {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.category-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.title-nav {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.title-item {
  display: block;
  padding: 12px 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #e9ecef;
}

.title-item:last-child {
  border-bottom: none;
}

.title-item:hover {
  background: #e9ecef;
  color: #333;
}

.title-item.active {
  background: #007bff;
  color: white;
  font-weight: bold;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #007bff;
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);
}

.nav-btn.prev {
  left: 20px;
}

.nav-btn.next {
  right: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-container {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  
  .image-container {
    height: 250px;
  }
  
  .title-item {
    padding: 10px 15px;
    font-size: 13px;
  }
  
  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .nav-btn.prev {
    left: 10px;
  }
  
  .nav-btn.next {
    right: 10px;
  }
}
</style>